<template>

  <div class="app-container">

    <!-- 表头条件表单 -->
    <el-form :inline="true" :model="course" class="form-inline">
      <el-form-item label="课程名称">
        <el-input v-model="course.title" clearable placeholder="课程名称"></el-input>
      </el-form-item>
      <el-form-item label="课程状态">
        <el-select v-model="course.status" clearable placeholder="课程状态">
          <el-option label="已发布" value="Normal"></el-option>
          <el-option label="未发布" value="Draft"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="selectCourses">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="updateCourseStatus">课程下架</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格渲染 -->
    <el-table ref="table" :data="list" border style="width: 100%">
      <el-table-column
        type="selection"
        width="40">
      </el-table-column>
      <el-table-column fixed label="课程封面" align="center" width="80px">
        <template slot-scope="scope">
            <img :src="scope.row.cover" width="40" height="40" class="head_pic"
              onerror="javascript:this.src='https://gitee.com/wuhunyu/images/raw/master/learn/images/20210114220355.JPG'"/>
        </template>
      </el-table-column>
      <el-table-column fixed prop="title" label="课程名称" min-width="100px"></el-table-column>
      <el-table-column fixed prop="name" label="任课讲师"></el-table-column>
      <el-table-column fixed prop="parentCourse" label="一级分类"></el-table-column>
      <el-table-column fixed prop="sonCourse" label="二级分类"></el-table-column>
      <el-table-column fixed label="状态" width="100px">
        <template slot-scope="scope">
          {{scope.row.status=='Draft'?'未发布':'已发布'}}
        </template>
      </el-table-column>
      <el-table-column fixed prop="lessonNum" label="课时/时" sortable></el-table-column>
      <el-table-column fixed prop="price" label="价格/元" sortable></el-table-column>
      <el-table-column fixed prop="viewCount" label="浏览次数" sortable></el-table-column>
      <el-table-column fixed prop="buyCount" label="购买次数" sortable></el-table-column>
      <el-table-column fixed="right" align="center" label="操作" min-width="240px">
        <template slot-scope="scope">
          <el-button type="warning" size="mini" @click="toCourseDetail(scope.row.id)">编辑课程基本信息</el-button>
          <el-button type="success" size="mini" @click="toChapterDetail(scope.row.id)">编辑课程大纲信息</el-button>
          <el-button size="mini" type="danger" @click="deleteCourse(scope.row)">删除课程</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页条 -->
    <div class="block">
      <el-pagination
        @current-change="changeCurrent"
        @size-change="changeLimit"
        :current-page="course.current"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="course.limit"
        layout="total,sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

  </div>

</template>

<script>

  import courseApi from '@/api/course'

  export default {
    data() {
      return {
        // 请求必须参数
        course: {
          current: 1,
          limit: 10,
          title: "",
          status: ""
        },
        total: 0, // 总记录数
        // 返回结果集合
        list: []
      }
    },
    created() {
      this.selectCourses(this.course);
    },
    methods: {
      // 查询课程信息列表
      selectCourses() {
        courseApi.selectCourses(this.course)
          // 访问成功
          .then(res => {
              // 结果集
              this.list=res.data.courses;
              // 总记录数
              this.total=res.data.total;
            }
          ).catch(err => {
            this.$message.error('查询课程信息失败');
            }
          );
      },
      // 跳转当前页
      changeCurrent(current) {
        this.course.current=current;
        this.selectCourses();
      },
      // 修改当前页面最大查看记录数
      changeLimit(limit) {
        this.course.limit=limit;
        this.selectCourses();
      },
      toCourseDetail(courseId) {
        // 校验参数
        if(courseId) {
          // 跳转到课程详情页
          this.$router.push({"path": "/course/courseDetail/"+courseId});
        }
      },
      toChapterDetail(courseId) {
        // 校验参数
        if(courseId) {
          // 跳转到章节详情页
          this.$router.push({"path": "/course/chapterDetail/"+courseId});
        }
      },
      // 删除课程信息
      deleteCourse(course) {
        // 校验id
        if(!course.id) {
          this.$message.error('课程id不能为空');
          return ;
        }
        // 校验课程名
        if(!course.title) {
          this.$message.error('课程名称不能为空');
          return ;
        }
        // 提示是否真的要删除
        this.$confirm(`确定删除课程：<span style="color: orange;">${course.title}</span> ?`, '删除课程', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          dangerouslyUseHTMLString: true  // 使用html片段
        }).then(() => {
          // 执行删除操作
          courseApi.deleteCourse(course.id)
            .then(res => {
                // 重新渲染表格
                this.selectCourses();
                // 提示信息
                this.$message({
                  type: 'success',
                  message: '删除成功',
                });
              }
            ).catch(err => {
                this.$message.error('删除失败');
              }
            );
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      // 课程下架
      updateCourseStatus() {
        // 校验被选中数据
        if(this.$refs.table.selection.length==0) {
          this.$message.error('未选中任何课程');
          return ;
        }
        let ids=[];
        this.$refs.table.selection.forEach((course,index) => {
          // 课程必须全部为已发布
          if(course.status!="Normal") {
            this.$message.error('无法对未发布的课程进行课程下架操作');
            throw "终止forEach";
          }
          // 获取下架的课程id
          ids.push(course.id);
        });
        // 执行下架操作
        courseApi.updateCourseStatus(ids)
          .then(res => {
            // 刷新表格
            this.selectCourses();
            // 提示成功
            this.$message({
              type: 'success',
              message: '下架课程成功'
            });
          }).catch(err => {
            this.$message.error(err.message);
          });
      }
    }
  }

</script>
